<template>
	<el-menu unique-opened :default-active="activeRoute" :collapse="store.isCollapse" background-color="#3e464e"
		active-text-color="#67C23A" style="border: none" text-color="#fff">
		<div class="top-content text-center mt-3 pb-4 mb-4">
			<h1 v-if="store.isCollapse" class="logo-content p-3">Jiess</h1>
			<h1 v-else class="logo-content p-3">{{ APP_CONFIG.title }}</h1>
		</div>
		<template v-for="(item, key) in menus" :key="key">
			<BaseMenuItem :menu-item="item" />
		</template>
		<div style="color: #666e76; text-align: center; font-size: 0.8em; background-color: inherit">V1.0.0</div>
	</el-menu>
</template>

<script setup>
import { ElMenu } from 'element-plus';
import { APP_CONFIG } from '@/jiessConfig/consts';
import BaseMenuItem from './MenuItem.vue';
import { useRoute } from 'vue-router';
import { useStore } from '@/store';
import { computed } from 'vue';
const store = useStore();
const route = useRoute();
const menus = computed(() => store.menus);
const activeRoute = computed(() => route.name);
</script>
<style scoped lang="scss">
.top-content {
	border-bottom: 1px solid #666e76;

	.logo-content {
		text-align: center;
		font-size: 20px;
		color: white;
	}
}
</style>